<template>
  <div>
    <div class="homeNew_b">
      <!-- 左边 -->
      <div class="homeNew_l">
        <!-- 地图 -->
        <div class="l_map">
          <div class="l_map_box">
            <div class="l_map_title" @click="HandleQuan">全省视图</div>
            <!-- <div>{{cityName === null ? (cityCode === '' || cityCode === '800' ? '省公司' :'') : cityName}}</div> -->
            <div>
              <el-radio v-model="NameRadio" label="1">{{
                cityName === null
                  ? cityCode === "" || cityCode === "800"
                    ? "省公司"
                    : cityCodeName
                  : cityName
              }}</el-radio>
            </div>
          </div>
          <div class="map_box" id="mapChart"></div>
        </div>
        <!-- 中间 -->
        <div class="l_content">
          <div class="l_c_img">
            <img src="~@/assets/homeNew/g_there.png" alt="" srcset="" />
          </div>
          <div class="l_c_c">
            <div><span>嘟一下推送人次</span></div>
            <div class="l_c_num">
              <span>{{ byModeType.累计嘟一下人次 | num }}</span>
              <!-- <span>人数</span> -->
            </div>
          </div>
        </div>
        <!-- 底部 -->
        <div class="l_button">
          <div class="l_b_b">
            <div class="l_b_b_img">
              <img
                class="img_one"
                src="~@/assets/homeNew/image.png"
                alt=""
                srcset=""
              />
            </div>
            <div>
              <img
                class="img_tow"
                src="~@/assets/homeNew/g_one.png"
                alt=""
                srcset=""
              />
            </div>
            <div class="l_b_b_title">累计短信人次</div>
            <div>{{ byModeType.累计短信人次 | num }}</div>
          </div>
          <div class="l_b_b">
            <div class="l_b_b_img">
              <img
                class="img_one"
                src="~@/assets/homeNew/tel.png"
                alt=""
                srcset=""
              />
            </div>
            <div>
              <img
                class="img_tow"
                src="~@/assets/homeNew/g_one.png"
                alt=""
                srcset=""
              />
            </div>
            <div class="l_b_b_title">累计外呼人次</div>
            <div>{{ byModeType.累计外呼人次 | num }}</div>
          </div>
          <div class="l_b_b">
            <div class="l_b_b_img">
              <img
                class="img_one"
                src="~@/assets/homeNew/xiangying.png"
                alt=""
                srcset=""
              />
            </div>
            <div>
              <img
                class="img_tow"
                src="~@/assets/homeNew/g_one.png"
                alt=""
                srcset=""
              />
            </div>
            <div class="l_b_b_title">累计响应人次</div>
            <div>{{ byModeType.累计相应人次 | num }}</div>
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="homeNew_r">
        <!-- 上面 -->
        <div class="r_top">
          <div class="r_top_img">
            <div class="r_top_img_title">
              <div class="r_img_title">
                <img src="~@/assets/homeNew/g_four.png" alt="" srcset="" />
                <span class="r_content_title">业务场景推送预览</span>
              </div>
              <div
                class="r_img_num"
                style="cursor: pointer"
                @click="handleButton"
              >
                <!-- 应用场景数：256 -->
                <img
                  src="~@/assets/courseImg/zhiyin.png"
                  alt=""
                  srcset=""
                  style="width: 20%"
                />
                <span style="color: rgb(2, 250, 254)">教程指导</span>
              </div>
            </div>
            <!-- 图片 -->
            <div class="r_img_box" ref="main_box" id="r_img_box_id">
              <!-- <div class="left_box" @click="handleLeft()">
                <img src="~@/assets/homeNew/left.png" alt="" srcset="">
              </div>
              <div class="right_box" @click="handleRgiht()">
                <img src="~@/assets/homeNew/right.png" alt="" srcset="">
              </div> -->
              <div
                class="r_img_box_item"
                v-for="(items, index) in userInfo1"
                :key="index"
              >
                <div class="xxxxxxx">
                  <img :src="items.b_imgurl" class="headImgStyle" />
                </div>
                <div class="r_img_box_nickname">
                  <img src="~@/assets/homeNew/g_seven.png" alt="" srcset="" />
                  {{ items.b_nickname }}
                </div>
                <div class="r_img_box_nickname_Num">
                  <div>
                    应用次数：<span style="font-size: 20px">{{
                      items.count | num
                    }}</span>
                  </div>
                  <div @click="choiceImg(items)">查看详情>></div>
                </div>
              </div>
            </div>
            <!-- <el-carousel
              :interval="4000"
              type="card"
              height="120px"
              indicator-position="none"
              arrow="always"
              :loop="true"
              :initial-index="1"
              :autoplay="false"
              style="width: 100%"
            >
              <el-carousel-item
                v-for="(items, index) in userInfo1"
                :key="index"
              >
                <div class="r_img_carousel_item">
                  <div class="xxxxxxx">
                    <img :src="items.b_imgurl" class="headImgStyle" />
                  </div>
                  <div class="r_img_nickname">
                    <img src="~@/assets/homeNew/g_four.png" alt="" srcset="" />
                    {{ items.b_nickname }}
                  </div>
                  <div class="r_img_nickname_Num">
                    <div>
                      应用次数：<span style="font-size: 20px">{{
                        items.count
                      }}</span>
                    </div>
                    <div @click="choiceImg(items)">查看详情>></div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel> -->
          </div>
        </div>
        <!-- 中间 -->
        <div class="r_content">
          <!-- 三方调用分布总览 -->
          <div class="r_content_one">
            <div>
              <img src="~@/assets/homeNew/g_four.png" alt="" srcset="" />
              <span class="r_content_title">第三方系统调用分布</span>
            </div>
            <div id="fraud_pie"></div>
          </div>
          <div class="r_content_tow">
            <div>
              <img src="~@/assets/homeNew/g_four.png" alt="" srcset="" />
              <span class="r_content_title">业务场景分布总览</span>
            </div>
            <div id="fraud_pieTow"></div>
          </div>
          <div class="r_content_there">
            <div>
              <img src="~@/assets/homeNew/g_four.png" alt="" srcset="" />
              <span class="r_content_title">场景推送人次top排名</span>
            </div>
            <div id="" class="r_top_b">
              <div
                v-for="(item, index) of cpcpApiManu"
                :key="index"
                class="r_top_box"
              >
                <span v-if="index + 1 === 1" class="span_one">
                  <img src="~@/assets/homeNew/topOne.png" alt="" srcset="" />
                </span>
                <span v-if="index + 1 === 2" class="span_one">
                  <img src="~@/assets/homeNew/topTow.png" alt="" srcset="" />
                </span>
                <span v-if="index + 1 === 3" class="span_one">
                  <img src="~@/assets/homeNew/topThere.png" alt="" srcset="" />
                </span>
                <span v-if="index + 1 > 3" class="span_one">{{
                  index + 1
                }}</span>
                <span class="span_tow" v-if="item.manufactorName.length < 7">{{
                  item.manufactorName.length > 7
                    ? item.manufactorName.substring(0, 7) + "..."
                    : item.manufactorName
                }}</span>
                <!-- <span class="span_tow" >{{ item.manufactorName.length>7?item.manufactorName.substring(0,7) + '...'  : item.manufactorName}}</span> -->
                <!-- <el-tooltip class="item" effect="dark" :content='item.manufactorName' placement="top" v-if="item.manufactorName.length<=7">
                  {{item.manufactorName}}
                </el-tooltip> -->
                <el-tooltip
                  placement="top"
                  v-if="item.manufactorName.length > 7"
                >
                  <div slot="content">{{ item.manufactorName }}</div>
                  <el-button type="text" class="span_tow">{{
                    item.manufactorName.length > 5
                      ? item.manufactorName.substring(0, 7) + "..."
                      : item.manufactorName
                  }}</el-button>
                </el-tooltip>
                <span class="span_there">{{ item.apiSum | num }}</span>
              </div>
            </div>
          </div>
          <!-- 业务场景分布总览 -->
          <!-- 场景top排名 -->
        </div>
        <!-- 下面 -->
        <div class="r_buttom">
          <div class="r_buttom_one">
            <div>
              <img src="~@/assets/homeNew/g_four.png" alt="" srcset="" />
              <span class="r_content_title">嘟一下活动人数日趋势</span>
              <div class="r_buttom_group">
                <el-radio-group
                  v-model="groupRadio"
                  size="mini"
                  @input="choiceRadio"
                >
                  <el-radio-button :label="0">推送量</el-radio-button>
                  <el-radio-button :label="1">响应量</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div id="buttom_line"></div>
          </div>
          <div class="r_buttom_tow">
            <div>
              <img src="~@/assets/homeNew/g_four.png" alt="" srcset="" />
              <span class="r_content_title">嘟一下分公司应用情况</span>
              <div class="r_buttom_group">
                <el-radio-group
                  v-model="groupRadioTow"
                  size="mini"
                  @input="choiceRadioTow"
                >
                  <el-radio-button :label="0">推送量</el-radio-button>
                  <el-radio-button :label="1">响应量</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div id="buttom_bar"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 业务场景推送预览 -弹框-->
    <el-dialog
      title="业务场景推送预览"
      :visible.sync="dialogChoiceImg"
      width="55%"
      class="home_new_dialog"
    >
      <div style="margin: auto; width: 50rem; margin-bottom: 10px">
        <span>{{ title }}</span>
      </div>
      <div style="text-align: center">
        <img :src="imgUrl" alt="" @click="handleImg(imgUrl)" />
      </div>
    </el-dialog>
    <div class="bgImg">
      <el-dialog
        width="100%"
        :visible.sync="courseImgShow"
        top="0"
        style="z-index: 1000"
      >
        <div class="courseImg couseDiv">
          <div @click="choiceOne" class=""></div>
          <div @click="choiceTow"></div>
        </div>
      </el-dialog>
    </div>
    <!-- 推送引导 -->
    <div class="guide_img">
      <el-dialog
        width="100%"
        :visible.sync="courseGuideShow"
        ref="elDialog"
        top="0px"
      >
        <el-carousel
          trigger="click"
          @click.native="linkTo"
          height="90vh"
          ref="carouselGuide"
        >
          <el-carousel-item
            class="lun_img"
            v-for="item in imgsGuide"
            v-bind:key="item.url"
          >
            <img :src="item.url" class="img_items" />
          </el-carousel-item>
        </el-carousel>
      </el-dialog>
    </div>
    <!-- 群组配置 -->
    <div class="guide_img">
      <el-dialog
        width="100%"
        :visible.sync="courseGroupShow"
        ref="elDialog"
        top="0px"
      >
        <el-carousel
          trigger="click"
          @click.native="linkToGroup"
          height="90vh"
          ref="carouselGroup"
        >
          <el-carousel-item
            class="lun_img"
            v-for="item in imgsGroup"
            v-bind:key="item.url"
          >
            <img :src="item.url" class="img_items" />
          </el-carousel-item>
        </el-carousel>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Drag from "../../utils/move.js";
import anHui from "@/assets/map/安徽省.Json";
import anQing from "@/assets/map/安庆市.Json";
echarts.registerMap("anHui", anHui);
echarts.registerMap("anQing", anQing);
export default {
  data() {
    return {
      courseImgShow: false,
      courseGroupShow: false,
      courseGuideShow: false,
      imgsGuide: [
        {
          url: require("../../assets/courseImg/guide_one.jpg"),
          link: "/content1",
          indexImg: 1,
        },
        {
          url: require("../../assets/courseImg/guide_tow.jpg"),
          link: "/content1",
          indexImg: 2,
        },
        {
          url: require("../../assets/courseImg/guide_there.jpg"),
          link: "/content1",
          indexImg: 3,
        },
        {
          url: require("../../assets/courseImg/guide_four.jpg"),
          link: "/content1",
          indexImg: 4,
        },
        {
          url: require("../../assets/courseImg/guide_five.jpg"),
          link: "/content1",
          indexImg: 5,
        },
        {
          url: require("../../assets/courseImg/guide_sex.jpg"),
          link: "/content1",
          indexImg: 6,
        },
      ],
      imgsGroup: [
        {
          url: require("../../assets/courseImg/group_one.jpg"),
          link: "/content1",
          indexImg: 1,
        },
        {
          url: require("../../assets/courseImg/group_tow.jpg"),
          link: "/content1",
          indexImg: 2,
        },
        {
          url: require("../../assets/courseImg/group_there.jpg"),
          link: "/content1",
          indexImg: 3,
        },
        {
          url: require("../../assets/courseImg/group_four.jpg"),
          link: "/content1",
          indexImg: 4,
        },
      ],
      dialogChoiceImg: false, //业务场景推送预览弹框显隐
      imgUrl: "", //照片地址
      title: "", //文字描述
      NameRadio: "1",
      groupRadio: "0", //嘟一下活动人数日趋势 - 0:推送量,1:响应量
      groupRadioTow: "0", //嘟一下分公司推送人数统计分析 - 0:推送量,1:响应量
      flag: 1, //1:页面刚进来，0：点击地市或者全省
      byModeType: {}, //左边底部四个数据
      cityCodeName: null, //当前登录人对应的地市
      city: null, //点击地图，获取地市code，
      cityName: null, //点击地图对应的地市
      outbountTime: "",
      businessSceneTime: "",
      mapObj: null,
      map: "anHui",
      cityList: [
        {
          city: "全省",
          cityCode: 0,
        },
        {
          city: "滁州市",
          cityCode: 550,
        },
        {
          city: "合肥市",
          cityCode: 551,
        },
        {
          city: "蚌埠市",
          cityCode: 552,
        },
        {
          city: "芜湖市",
          cityCode: 553,
        },
        {
          city: "淮南市",
          cityCode: 554,
        },
        {
          city: "马鞍山市",
          cityCode: 555,
        },
        {
          city: "安庆市",
          cityCode: 556,
        },
        {
          city: "宿州市",
          cityCode: 557,
        },
        {
          city: "阜阳市",
          cityCode: 558,
        },
        {
          city: "黄山市",
          cityCode: 559,
        },
        {
          city: "亳州市",
          cityCode: 560,
        },
        {
          city: "淮北市",
          cityCode: 561,
        },
        {
          city: "铜陵市",
          cityCode: 562,
        },
        {
          city: "宣城市",
          cityCode: 563,
        },
        {
          city: "六安市",
          cityCode: 564,
        },
        {
          city: "池州市",
          cityCode: 566,
        },
      ],
      maps: [
        { name: "全省", ping: "anHui" },
        { name: "安庆市", ping: "anQing" },
        { name: "蚌埠市", ping: "bbu" },
        { name: "亳州市", ping: "boz" },
        { name: "池州市", ping: "chiz" },
        { name: "滁州市", ping: "chuz" },
        { name: "阜阳市", ping: "fuy" },
        { name: "合肥市", ping: "hf" },
        { name: "淮北市", ping: "hbei" },
        { name: "淮南市", ping: "hnan" },
        { name: "黄山市", ping: "hshan" },
        { name: "六安市", ping: "luan" },
        { name: "马鞍山市", ping: "mas" },
        { name: "宿州市", ping: "suz" },
        { name: "铜陵市", ping: "tling" },
        { name: "芜湖市", ping: "wuh" },
        { name: "宣城市", ping: "xc" },
      ],
      cpcpApiManu: [],
      userInfo1: [
        // {
        //   b_imgurl: require("../../assets/homeNew/duOne.png"),
        //   b_nickname: "自定义文本推送",
        //   indexImg: 1,
        // },
        // {
        //   b_imgurl: require("../../assets/homeNew/duTow.png"),
        //   b_nickname: "异动预警",
        //   indexImg: 1,
        //   count: "",
        // },
        // {
        //   b_imgurl: require("../../assets/homeNew/duThere.png"),
        //   b_nickname: "标签小贴士",
        //   indexImg: 1,
        //   count: "",
        // },
        // {
        //   b_imgurl: require("../../assets/homeNew/duFour.png"),
        //   b_nickname: "规则知识送达",
        //   indexImg: 1,
        //   count: "",
        // },
        // {
        //   b_imgurl: require("../../assets/homeNew/duFive.png"),
        //   b_nickname: "5G领导视窗",
        //   indexImg: 1,
        //   count: "",
        // },
        // {
        //   b_imgurl: require("../../assets/homeNew/duSix.png"),
        //   b_nickname: "宽表小贴士",
        //   indexImg: 1,
        //   count: "",
        // },
        // {
        //   b_imgurl: require("../../assets/homeNew/duSeven.png"),
        //   b_nickname: "销售组织打卡",
        //   indexImg: 1,
        //   count: "",
        // },
        {
          b_imgurl: require("../../assets/homeNew/gzrhyj.png"),
          b_nickname: "高值融合预警",
          indexImg: 8,
          count:"28289"
        },
        {
          b_imgurl: require("../../assets/homeNew/spyj.png"),
          b_nickname: "沙盘预警",
          indexImg: 9,
          count:"15640"
        },
        // {
        //   b_imgurl: require("../../assets/homeNew/yyqd.png"),
        //   b_nickname: "预约抢单",
        //   indexImg: 10,
        //   count:"10"
        // },
        {
          b_imgurl: require("../../assets/homeNew/xqsqz.png"),
          b_nickname: "小区升千兆",
          indexImg: 7,
          count:"14759"
        },
        {
          b_imgurl: require("../../assets/homeNew/hfddpftx.png"),
          b_nickname: "合肥工单派发提醒",
          indexImg: 3,
          count:"43066"
        },
        {
          b_imgurl: require("../../assets/homeNew/szxc.png"),
          b_nickname: "数字乡村",
          indexImg: 6,
          count:"30474"
        },
        {
          b_imgurl: require("../../assets/homeNew/qwzn.png"),
          b_nickname: "全屋智能",
          indexImg: 4,
          count:"24675"
        },
        {
          b_imgurl: require("../../assets/homeNew/swhkfzx.png"),
          b_nickname: "省万号客服中心",
          indexImg: 5,
          count:"1891"
        },
        {
          b_imgurl: require("../../assets/homeNew/dsjgdkh.png"),
          b_nickname: "倒三角工单刻画",
          indexImg: 2,
          count:"102"
        },
        {
          b_imgurl: require("../../assets/homeNew/cpspywxxtx.png"),
          b_nickname: "cpsp业务消息提醒",
          indexImg: 1,
          count:"6"
        },
      ],
      imgsGroupTow: [
        // {
        //   url: require("../../assets/imtTow/zdywbts.png"),
        //   link: "/content1",
        //   indexImg: 1,
        //   name: "自定义文本推送",
        //   title:
        //     "自定文本推送：可自定义推送文本内容，可支持富文本编辑功能并支持上传图片、文件等功能。",
        // },
        // {
        //   url: require("../../assets/imtTow/xszzdk.png"),
        //   link: "/content1",
        //   indexImg: 2,
        //   name: "销售组织打卡",
        //   title:
        //     "销售组织打卡：智运灯塔每日配置相关打卡活动，嘟一下自动生成打卡信息图片及跳转打卡链接页面，打卡签到。",
        // },
        // {
        //   url: require("../../assets/imtTow/ydyj.png"),
        //   link: "/content1",
        //   indexImg: 3,
        //   name: "异动预警",
        //   title:
        //     "异动预警：每日大数据平台获取异动场景相关数据，支持插入动态变量参数，可自动向上升级推送相关通报报表",
        // },
        // {
        //   url: require("../../assets/imtTow/gzzssd.png"),
        //   link: "/content1",
        //   indexImg: 4,
        //   name: "规则知识送达",
        //   title:
        //     "规则知识送达：智运灯塔配置相关业务知识点，嘟一下推送对应知识文件及相关说明",
        // },
        // {
        //   url: require("../../assets/imtTow/5Gldst.png"),
        //   link: "/content1",
        //   indexImg: 5,
        //   name: "5G领导视窗",
        //   title:
        //     "领导视窗：智运灯塔领导视窗集成“嘟能力”，管理人员在系统上发起领导视窗，嘟一下推送可视化视窗给一线领导，快速帮助一线领导掌控全局数据，快速定位“下一步”大方向。",
        // },
        // {
        //   url: require("../../assets/imtTow/kbxts.png"),
        //   link: "/content1",
        //   indexImg: 6,
        //   name: "宽表小贴士",
        //   title:
        //     "宽表小贴士：嘟一下将快电-规范动作指标、营销动作指标快电-业务发展指标、快电-全景指标等数据制成卡片形式推送给一线人员。",
        // },
        // {
        //   url: require("../../assets/imtTow/bqxts.png"),
        //   link: "/content1",
        //   indexImg: 7,
        //   name: "标签小贴士",
        //   title:
        //     "标签小贴士：嘟一下将标签新上字段，标签口径等数据制成卡片形式推送给一线人员。",
        // },
        // {
        //   url: require("../../assets/imtTow/zdywbts.png"),
        //   link: "/content1",
        //   indexImg: 1,
        //   name: "cpsp业务消息提醒",
        //   title:
        //     "cpsp业务消息提醒：可自定义推送文本内容，可支持富文本编辑功能并支持上传图片、文件等功能。",
        // },
        // {
        //   url: require("../../assets/imtTow/zdywbts.png"),
        //   link: "/content1",
        //   indexImg: 1,
        //   name: "倒三角工单刻画",
        //   title:
        //     "倒三角工单刻画：可自定义推送文本内容，可支持富文本编辑功能并支持上传图片、文件等功能。",
        // },
        // {
        //   url: require("../../assets/imtTow/zdywbts.png"),
        //   link: "/content1",
        //   indexImg: 1,
        //   name: "合肥工单派发提醒",
        //   title:
        //     "合肥工单派发提醒：可自定义推送文本内容，可支持富文本编辑功能并支持上传图片、文件等功能。",
        // },
        // {
        //   url: require("../../assets/imtTow/zdywbts.png"),
        //   link: "/content1",
        //   indexImg: 1,
        //   name: "全屋智能",
        //   title:
        //     "全屋智能：可自定义推送文本内容，可支持富文本编辑功能并支持上传图片、文件等功能。",
        // },
        // {
        //   url: require("../../assets/imtTow/zdywbts.png"),
        //   link: "/content1",
        //   indexImg: 1,
        //   name: "省万号客服中心",
        //   title:
        //     "省万号客服中心：可自定义推送文本内容，可支持富文本编辑功能并支持上传图片、文件等功能。",
        // },{
        //   url: require("../../assets/imtTow/zdywbts.png"),
        //   link: "/content1",
        //   indexImg: 1,
        //   name: "数字乡村",
        //   title:
        //     "数字乡村：可自定义推送文本内容，可支持富文本编辑功能并支持上传图片、文件等功能。",
        // },
        {
          url: require("../../assets/imtTow/xqsjz2.jpg"),
          link: "/content1",
          indexImg: 7,
          name: "小区升千兆",
          title:
            "小区升千兆：营销人员洞察宽带升级目标聚集小区，通过“嘟一下”推送至包区经理，完成一线运维与营销场景协同。",
        },
        {
          url: require("../../assets/imtTow/hfgdpftx.jpg"),
          link: "/content1",
          indexImg: 7,
          name: "合肥工单派发提醒",
          title:
            "合肥工单派发提醒：营销人员洞察宽带升级目标聚集小区，通过“嘟一下”推送至包区经理，完成一线运维与营销场景协同。",
        },
        {
          url: require("../../assets/imtTow/szxc.jpg"),
          link: "/content1",
          indexImg: 7,
          name: "数字乡村",
          title:
            "数字乡村：营销人员洞察宽带升级目标聚集小区，通过“嘟一下”推送至包区经理，完成一线运维与营销场景协同。",
        },
        {
          url: require("../../assets/imtTow/qwzn.jpg"),
          link: "/content1",
          indexImg: 7,
          name: "全屋智能",
          title:
            "全屋智能：营销人员洞察宽带升级目标聚集小区，通过“嘟一下”推送至包区经理，完成一线运维与营销场景协同。",
        },
        {
          url: require("../../assets/imtTow/swhkfzx.jpg"),
          link: "/content1",
          indexImg: 7,
          name: "省万号客服中心",
          title:
            "省万号客服中心：营销人员洞察宽带升级目标聚集小区，通过“嘟一下”推送至包区经理，完成一线运维与营销场景协同。",
        },
        {
          url: require("../../assets/imtTow/dsjNew.png"),
          link: "/content1",
          indexImg: 7,
          name: "倒三角工单刻画",
          title:
            "倒三角工单刻画：营销人员洞察宽带升级目标聚集小区，通过“嘟一下”推送至包区经理，完成一线运维与营销场景协同。",
        },
        {
          url: require("../../assets/imtTow/cpsp.jpg"),
          link: "/content1",
          indexImg: 7,
          name: "cpsp业务消息提醒",
          title:
            "cpsp业务消息提醒：营销人员洞察宽带升级目标聚集小区，通过“嘟一下”推送至包区经理，完成一线运维与营销场景协同。",
        },
        {
          url: require("../../assets/imtTow/gzrhyj_b.jpg"),
          link: "/content1",
          indexImg: 7,
          name: "高值融合预警",
          title:
            "高值融合预警：每日将高值融合预警数据根据告警等级、告警类型等条件设置针对不同层级推送至分公司主任、分公司领导。",
        },
        {
          url: require("../../assets/imtTow/spyj_b.jpg"),
          link: "/content1",
          indexImg: 7,
          name: "沙盘预警",
          title:
            "服务沙盘预警：实现预警触发、派单推送、整改反馈、回单管理全流程线上管控，保障全省投申诉工单异动情况监控，支撑客服条线投诉监管数字化工作。",
        },
        {
          url: require("../../assets/imtTow/yyqd_b.jpg"),
          link: "/content1",
          indexImg: 7,
          name: "预约抢单",
          title:
            "客服中心抢单：客服门户4.0系统接入嘟一下，发送客服工单预约抢单页面给一线话务员。",
        },
      ],
    };
  },
  filters: {
    //num:是页面显示的数据
    //val：代码获取到的数据
    //{{data|num}}: data:相当于val，num：是页面显示的数据
    //data相当于参数传给了下面的val
    //必须要有返回值 temp（最终显示在页面上的数据）
    num: (val) => {
      // console.log("val", val);
      if (val === undefined) {
        return "数据加载中";
      }
      val = "" + val; // 转换成字符串
      let int = val;
      int = int.split("").reverse().join(""); // 翻转整数
      let temp = ""; // 临时变量
      for (let i = 0; i < int.length; i++) {
        temp += int[i];
        if ((i + 1) % 3 === 0 && i !== int.length - 1) {
          temp += ","; // 每隔三个数字拼接一个逗号
        }
      }
      temp = temp.split("").reverse().join(""); // 加完逗号之后翻转
      return temp; // 返回
    },
  },
  mounted() {
    this.initMap();
    // console.log("this.flag==", this.flag);
    this.fetchFraudPieData(); //饼图-三方调用
    this.fetchFraudPieDataTow(); //业务场景分布总览
    this.fetchFraudLineData();
    this.fetchFraudBarData();
    // new Drag(this.$refs.main_box);
  },
  activated() {
    this.groupRadio = "0";
    this.groupRadioTow = "0";
    this.fetchFraudLineData();
    // this.getSort()
  },
  created() {

    let url = window.location.href
    var reg = url.substring(url.indexOf('?') + 1, url.indexOf('#')).split('&')
    let list = []
    reg.forEach(item => {
      let obj = {}
      let data = item.split('=')
      let x = data[0]
      console.info(x)
      console.info(data[1])
      if(x == 'token'){
        this.$cookie.set('token', data[1])
      }
      // obj[x] = data[1]
      // list.push(obj)
    })
    // console.info(reg)


    this.getByModeType(); //后面的四个数据
    this.getcityList();
    this.getDay();
    this.getActiveCount();
  },
  methods: {
    //头部业务场景推送预览数据排序
    // getSort(){
    //   this.userInfo1 = this.userInfo1.sort((a, b) => {
    //   return b.count - a.count; //降序排列
    // });
    // },
    //点击教程指导
    handleButton() {
      this.courseImgShow = true;
    },
    choiceOne() {
      var self = this;
      self.courseImgShow = false;
      //推送引导显示
      self.courseGuideShow = true;
      //群组配置隐藏
      self.courseGroupShow = false;
      if (!self.$refs.carouselGuide) {
        console.log("哈哈哈");
        // console.log("----------",self.$refs.carouselGuide.setActiveItem);
        setTimeout(function () {
          //等组件生成再调用setActiveItem(index);
          self.$refs.carouselGuide.setActiveItem("0");
        }, 500);
      } else {
        console.log("我试试");
        self.$refs.carouselGuide.setActiveItem("0");
      }
    },
    choiceTow() {
      var selfTow = this;
      selfTow.courseImgShow = false;
      //群组配置显示
      selfTow.courseGroupShow = true;
      //推送引导隐藏
      selfTow.courseGuideShow = false;
      if (!selfTow.$refs.carouselGroup) {
        console.log("哈哈哈");
        // console.log("----------",self.$refs.carouselGuide.setActiveItem);
        setTimeout(function () {
          //等组件生成再调用setActiveItem(index);
          selfTow.$refs.carouselGroup.setActiveItem("0");
        }, 500);
      } else {
        console.log("我试试");
        selfTow.$refs.carouselGroup.setActiveItem("0");
      }
    },
    linkTo() {
      console.log("=========", this.$refs.carouselGuide);
      let activeIndex = this.$refs.carouselGuide.activeIndex;
      console.log("activeIndex==", activeIndex);
      console.log("00000000000", this.imgsGuide[activeIndex].indexImg);
      if (this.imgsGuide[activeIndex].indexImg !== 6) {
        let num = activeIndex + 1;
        this.$refs.carouselGuide.setActiveItem(num);
      } else {
        this.courseGuideShow = false;
      }
      // this.$router.push(this.imgsGuide[activeIndex].link)
      // this.$router.push(this.imgs[activeIndex].link)
    },
    linkToGroup() {
      console.log("=========", this.$refs.carouselGroup);
      let activeIndex = this.$refs.carouselGroup.activeIndex;
      console.log("activeIndex==", activeIndex);
      console.log("00000000000", this.imgsGroup[activeIndex].indexImg);
      if (activeIndex !== 3) {
        let num = activeIndex + 1;
        this.$refs.carouselGroup.setActiveItem(num);
      } else {
        this.courseGroupShow = false;
      }
    },
    getcityList() {
      // console.log("============",this.cityList);
      // console.log("===========cityCode=",this.cityCode);
      this.cityList.forEach((element) => {
        // console.log("element===",element);
        if (element.cityCode == this.cityCode) {
          // console.log("element=1111111111",element.city);
          this.cityCodeName = element.city;
        }
      });
    },
    //左边底部四个数据
    getByModeType() {
      this.$http({
        url: this.$http.adornUrl("/cpcplog/getCountGroupByModeType2"),
        method: "get",
        params: this.$http.adornParams({
          city: this.city,
          cityCode: this.cityCode,
          flag: this.flag,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.byModeType = data.data;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //点击全省
    HandleQuan() {
      console.log("123454");
      this.flag = 0;
      this.cityName = null;
      this.city = null;
      this.getByModeType();
      this.mapObj.dispose();
      this.initMap();
    },
    // 初始化地图
    initMap() {
      const el = document.getElementById("mapChart");
      this.mapObj = echarts.init(el);
      this.mapObj.showLoading("default", {
        text: "统计中，请稍候...",
        maskColor: "#2957A2",
        textColor: "#fff",
      });
      this.mapObj.setOption(this.mapOptions);
      this.mapObj.hideLoading();
      let _this = this;
      this.mapObj.on("click", function (params) {
        console.log("-----------", params);
        let cityInfo = _this.cityList.find((d) => {
          // _this.map = params.name;
          // _this.mapObj.setOption(_this.mapOptions);
          //调取事件，获取点击地市图形
          // _this.changeCity(params.name)
          _this.flag = 0;
          return d.city === params.name;
        });
        console.log("-----------", params.name);
        _this.cityName = params.name;
        console.log(
          "_this.cityName_this.cityName_this.cityName",
          _this.cityName
        );
        console.log("-----cityInfo-", cityInfo);
        _this.city = cityInfo.cityCode;
        console.log("city==", _this.city);
        _this.getByModeType();
      });
    },
    //change改变的事件
    changeCity(value) {
      console.log(value);
      let ll = this.maps.find((d) => d.name === value);
      console.log("ll====", ll);
      let mapPing = ll.ping;
      this.map = mapPing;
      this.mapObj.setOption(this.mapOptions);
    },
    //饼图(三方调用)
    fetchFraudPieData() {
      this.$http({
        // url: this.$http.adornUrl("/cpcpdu/getCountGroupBy"),
        url: this.$http.adornUrl("/CcpcpHomePage/cpcpHomePage"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("data", data);
          this.initFraudPie(data.data);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    initFraudPie(data) {
      let fraud = echarts.init(document.getElementById("fraud_pie"));
      // fraud.showLoading("default", {
      //   text: "统计中，请稍候...",
      //   maskColor: "#2957A2",
      //   textColor: "#fff",
      // });
      let arr = [];
      data.forEach((element) => {
        arr.push({
          value: element.apiSum, //将数组的conut值赋给value
          name: element.manufactorName, //将数组的name值赋给name
        });
      });
      let option = {
        // backgroundColor: "#0A173B",
        title: {
          left: "center",
          top: "10",
          // text: "三方调用分布总览",
          textStyle: {
            fontSize: 22,
            color: "#fff",
            left: "20%",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: "scroll",
          top: "center",
          // top: "12%",
          orient: "vertical",
          right: "1%",
          textStyle: {
            fontSize: 11, //字体大小
            color: "#fff", //字体颜色
          },
          icon: "circle",
        },
        textStyle: {
          color: "#fff",
        },
        series: [
          {
            // name: 'Nightingale Chart',
            type: "pie",
            minAngle: 10,
            // radius: [30, 80],
            radius: ["18%", "50%"],
            center: ["37%", "50%"],
            // roseType: 'area',
            itemStyle: {
              borderRadius: 8,
            },
            data: arr,
            label: {
              show: false,
              position: "center",
              normal: {
                formatter: "{font|{d}%}\n{hr|}",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 15,
                  color: "#fff", //字体颜色
                },
                overflow: "none",
                rich: {
                  //圆点位置大小配置
                  font: {
                    fontSize: 12,
                    // padding: [5, 10],
                    color: "#fff",
                    padding: [-12, 10, -20, 15],
                  },
                  hr: {
                    // height: 0,
                    borderWidth: 1,
                    // width: "100%",
                    borderColor: "#fff",
                    backgroundColor: "auto",
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12],
                  },
                },
              },
            },
            labelLine: {
              // lineStyle: {
              //   // color: "#fff",
              // },
              normal: {
                // minSurfaceAngle: 90,
                // smooth: 0.5,
                length: 10, // 修改引导线第一段的长度
                length2: 10, // 修改引导线第二段的长度
                lineStyle: {
                  // color: "red", // 修改引导线的颜色
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0,0,0,0.5)",
              },
            },
          },
        ],
      };
      // chart.setOption(option, notMerge, lazyUpdate);
      //notMerge:可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
      fraud.setOption(option); //当修改setOption值的时候，需要echarts重绘，第二个人参数是
      // fraud.hideLoading();
      window.addEventListener("resize", () => {
        fraud.resize();
      });
    },
    //饼图(业务场景分布总览)
    fetchFraudPieDataTow() {
      this.$http({
        url: this.$http.adornUrl("/CcpcpHomePage/cpcpApiManu"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("data-------", data);
          this.cpcpApiManu = data.data;
          this.initFraudPieTow(data.data);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    initFraudPieTow(data) {
      //获取到上面的标签<div id="fraud"></div>
      let fraud = echarts.init(document.getElementById("fraud_pieTow"));
      // fraud.showLoading("default", {
      //   text: "统计中，请稍候...",
      //   maskColor: "#2957A2",
      //   textColor: "#fff",
      // });
      let arr = [];
      data.forEach((element) => {
        arr.push({
          value: element.apiSum, //将数组的conut值赋给value
          name: element.manufactorName, //将数组的name值赋给name
        });
      });
      let option = {
        // backgroundColor: "#0A173B",
        title: {
          left: "center",
          top: "10",
          // text: "三方调用分布总览",
          textStyle: {
            fontSize: 22,
            color: "#fff",
            left: "20%",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
          // formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          type: "scroll",
          // top: "12%",
          top: "center",
          orient: "vertical",
          right: "0.5%",
          textStyle: {
            fontSize: 11, //字体大小
            color: "#fff", //字体颜色
          },
          icon: "circle",
        },
        textStyle: {
          color: "#fff",
        },
        series: [
          {
            // name: 'Nightingale Chart',
            type: "pie",
            minAngle: 10,
            // radius: [30, 68],
            radius: ["18%", "50%"],
            center: ["30%", "50%"],
            // roseType: 'area',
            itemStyle: {
              borderRadius: 8,
            },
            data: arr,
            label: {
              show: false,
              position: "center",
              normal: {
                formatter: "{font|{d}%}\n{hr|}",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 15,
                  color: "#fff", //字体颜色
                },
                overflow: "none",
                rich: {
                  //圆点位置大小配置
                  font: {
                    fontSize: 12,
                    // padding: [5, 10],
                    color: "#fff",
                    padding: [-12, 10, -20, 15],
                  },
                  hr: {
                    // height: 0,
                    borderWidth: 1,
                    // width: "100%",
                    borderColor: "#fff",
                    backgroundColor: "auto",
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12],
                  },
                },
              },
            },
            labelLine: {
              // lineStyle: {
              //   // color: "#fff",
              // },
              normal: {
                // minSurfaceAngle: 90,
                // smooth: 0.5,
                length: 10, // 修改引导线第一段的长度
                length2: 10, // 修改引导线第二段的长度
                lineStyle: {
                  // color: "red", // 修改引导线的颜色
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0,0,0,0.5)",
              },
            },
          },
        ],
      };
      // chart.setOption(option, notMerge, lazyUpdate);
      //notMerge:可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
      fraud.setOption(option); //当修改setOption值的时候，需要echarts重绘，第二个人参数是
      // fraud.hideLoading();
      window.addEventListener("resize", () => {
        fraud.resize();
      });
    },
    // 嘟一下活动人数日趋势 -点击推送量/响应量
    choiceRadio() {
      console.log("groupRadio=", this.groupRadio);
      this.fetchFraudLineData();
    },
    // 嘟一下分公司推送人数统计分析 -点击推送量/响应量
    choiceRadioTow() {
      console.log("groupRadioTow=", this.groupRadioTow);
      this.fetchFraudBarData();
    },
    getDay() {
      //当天的开始时间 年月日 时分秒
      let daySart = new Date(
        new Date(new Date().toLocaleDateString()).getTime()
      );
      // console.log(daySart);
      let newdate = new Date(daySart);
      var yyyy = newdate.getFullYear();
      var mmmm = newdate.getMonth() + 1;
      mmmm = mmmm < 10 ? "0" + mmmm : mmmm;
      var dddd = newdate.getDate();
      this.newStime =
        newdate.getFullYear() +
        "-" +
        mmmm +
        "-" +
        newdate.getDate() +
        " " +
        newdate.getHours() +
        +"0" +
        ":" +
        newdate.getMinutes() +
        +"0" +
        ":" +
        newdate.getSeconds() +
        "0";
      this.newStimeNew =
        newdate.getFullYear() + "-" + mmmm + "-" + newdate.getDate() + "";
      // console.log("当天开始时间",this.newStime);
      // console.log("当天开始时间", this.newStimeNew);
      //当天的结束时间 年月日 时分秒
      let dayEnd = new Date(
        new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1
      );
      let endDate = new Date(dayEnd);
      this.endTime =
        endDate.getFullYear() +
        "-" +
        (endDate.getMonth() + 1) +
        "-" +
        endDate.getDate() +
        " " +
        endDate.getHours() +
        ":" +
        endDate.getMinutes() +
        ":" +
        endDate.getSeconds();
      // console.log(dayEnd);
      // console.log("当天结束时间",this.endTime);
      this.dataTime = "当日" + "_" + this.newStime + "_" + this.endTime;
      // console.log("当天时间拼接", this.dataTime);
      //当月的第一天 年月日 时分秒
      function formatDateTime(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? "0" + minute : minute;
        second = second < 10 ? "0" + second : second;
        return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
      }
      //当月的第一天 年月日
      function formatDateTimeNew(inputTime) {
        var date = new Date(inputTime);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        return y + "-" + m + "-" + d;
      }
      var data = new Date();
      data.setDate(1);
      data.setHours(0);
      data.setSeconds(0);
      data.setMinutes(0);
      this.newMonth = formatDateTime(data.getTime());
      this.newMonthNew = formatDateTimeNew(data.getTime());
      // console.log("this.newMonth==", this.newMonth);
      // console.log("this.newMonthNew==", this.newMonthNew);
      //当月的最后一天 年月日 时分秒
      let mDate = new Date();
      let currentMonth = mDate.getMonth();
      let nextMonth = ++currentMonth;
      let nextMonthFirstDay = new Date(mDate.getFullYear(), nextMonth, 1);
      let oneDay = 1000 * 60 * 60 * 24;
      let lastTime = new Date(nextMonthFirstDay - oneDay);
      let month = parseInt(lastTime.getMonth() + 1);
      let day = lastTime.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let hms = "23" + ":" + "59" + ":" + "59";
      this.endMonth = mDate.getFullYear() + "-" + month + "-" + day + " " + hms;
      // console.log("this.endMonth==",this.endMonth);
      this.monthTime = "当月" + "_" + this.newMonth + "_" + this.endMonth;
      // console.log("当月时间拼接", this.monthTime);
      this.timeMonth = this.dataTime + "," + this.monthTime;
      // console.log("this.timeMonth=======",this.timeMonth);
      if (this.outbountTime === "" || this.outbountTime === null) {
        // console.log("sssssssssssssssssssssssss");
        this.outbountTime = [this.newMonthNew, this.newStimeNew];
        this.businessSceneTime = [this.newMonthNew, this.newStimeNew];
        console.log("------------------", this.outbountTime);
      }
    },
    //推送量/响应量数据
    fetchFraudLineData() {
      this.$http({
        url: this.$http.adornUrl("/cpcplog/cpcpPush"),
        method: "get",
        params: this.$http.adornParams({
          startTime: this.outbountTime[0] + " 00:00:00",
          endTime: this.outbountTime[1] + " 23:59:59",
          flag: parseInt(this.groupRadio),
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("-------------".data);
          this.initFraudLine(data.data);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //（右边-头部）
    getActiveCount() {
      this.$http({
        url: this.$http.adornUrl("/cpcplog/getActiveCount"),
        method: "get",
        params: this.$http.adornParams({
          startTime: this.businessSceneTime[0] + " 00:00:00",
          endTime: this.businessSceneTime[1] + " 23:59:59",
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("-------------", data);
          // data.data.forEach((a, index1) => {
          //   this.userInfo1.forEach((b, index2) => {
          //     if (a.activeName === b.b_nickname) {
          //       b.count = a.count;
          //     }
          //   });
          // });
          console.log("this.userInfo1==", this.userInfo1);
          // this.scenePush = data.data;
          // this.initFraudSceneBar(data.data);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    initFraudLine(data) {
      //获取到上面的标签<div id="fraud"></div>
      let fraud = echarts.init(document.getElementById("buttom_line"));
      // fraud.showLoading("default", {
      //   text: "统计中，请稍候...",
      //   maskColor: "#2957A2",
      //   textColor: "#fff",
      // });
      console.log("=fraud=", fraud);
      // let times = [];
      // data.forEach((element) => {
      //   arr.push({
      //     value: element.count, //将数组的conut值赋给value
      //     name: element.activityName, //将数组的name值赋给name
      //   });
      // });
      let time = data.map((d) =>
        d.time.substring(d.time.length, d.time.length - 5)
      );
      let pushCount = data.map((d) => d.pushCount);
      let option = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        title: {
          left: "22",
          top: "15",
          // text: "嘟一下活动响应人数统计分析",
          textStyle: {
            color: "#fff",
            left: "20%",
          },
        },

        textStyle: {
          color: "#fff",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "rgb(4,134,159)",
            },
          },
        },
        // legend: {
        //   data: ["Line 1"],
        // },
        grid: {
          left: "1%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: time,
            axisLabel: {
              // rotate: 30, // 倾斜30度
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // scale: true,
          },
        ],
        series: [
          {
            // name: "Line 1",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            smooth: true,
            lineStyle: {
              width: 0,
            },
            // showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: pushCount,
          },
        ],
      };
      // chart.setOption(option, notMerge, lazyUpdate);
      //notMerge:可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
      fraud.setOption(option); //当修改setOption值的时候，需要echarts重绘，第二个人参数是
      // fraud.hideLoading();
      window.addEventListener("resize", () => {
        fraud.resize();
      });
    },
    //柱状图（右下角）-嘟一下分公司应用情况
    fetchFraudBarData() {
      this.$http({
        // url: this.$http.adornUrl("/cpcplog/getCountBYCityCode"),
        url: this.$http.adornUrl("/cpcplog/getCountBYCityPush"),
        method: "get",
        params: this.$http.adornParams({
          flag: parseInt(this.groupRadioTow),
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("data==", data);
          this.initFraudBar(data.data);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    initFraudBar(data) {
      //获取到上面的标签<div id="fraud"></div>
      let fraud = echarts.init(document.getElementById("buttom_bar"));
      let dataSqua = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      // fraud.showLoading("default", {
      //   text: "统计中，请稍候...",
      //   maskColor: "#2957A2",
      //   textColor: "#fff",
      // });
      let cityName = data.map((d) => d.city);
      console.log("this.groupRadioTow====",this.groupRadioTow);
      console.log("this.groupRadioTow====",typeof this.groupRadioTow);
      let pushSumCount = []
      if (this.groupRadioTow === '0' || this.groupRadioTow === 0) {
        pushSumCount = data.map((d) => d.pushCount);
      }else{
       pushSumCount = data.map((d) => d.answerCount);
      }
      // let pushSumCount = data.map((d) => d.answerCount);
      console.log("pushSumCount=",pushSumCount);
      let option = {
        textStyle: {
          color: "#c0c3cd",
          fontSize: 14,
        },
        title: {
          left: "22",
          top: "15",
          // text: "嘟一下分公司推送人数统计分析",
          textStyle: {
            color: "#fff",
            left: "20%",
          },
        },
        tooltip: {
          trigger: "item",
        },
        dataZoom: [
          {
            type: "slider",
            realtime: true,
            startValue: 0,
            endValue: 9,
            height: 4,
            fillerColor: "#0D3772", // 滚动条颜色
            borderColor: "#0D3772",
            handleSize: 0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top: "98.5%",
            moveHandleStyle: {
              color: "#0d3772",
            },
          },
          {
            type: "inside", // 支持内部鼠标滚动平移
            startValue: 0,
            endValue: 5,
            zoomOnMouseWheel: false, // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
          },
        ],
        color: ["#00D7E9", "rgba(0, 215, 233, 0.9)"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          itemWidth: 10,
          containLabel: true,
        },
        legend: {
          // top: "center",
          color: ["#3398DB"], //此处可设置柱条全局颜色
          orient: "vertical",
          left: "80%",
          width: "auto", //图例宽度
          bottom: "80%",
          height: "auto",
          itemWidth: 10,
          textStyle: {
            fontSize: 18, //字体大小
            color: "#fff", //字体颜色
          },
        },
        textStyle: {
          color: "#fff",
        },
        xAxis: [
          {
            type: "category",
            data: cityName,
            axisTick: {
              alignWithLabel: true,
            },
            nameTextStyle: {
              color: "#82b0ec",
            },
            axisLine: {
              lineStyle: {
                color: "#82b0ec",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#82b0ec",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#82b0ec",
              },
              formatter: "{value}",
            },
            splitLine: {
              lineStyle: {
                color: "#0c2c5a",
              },
            },
            axisLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            symbolPosition: "end",
            z: 12,
            label: {
              normal: {
                show: true,
                position: "top",
                color: "#FFF",
                formatter: "{c}",
              },
            },
            data: pushSumCount,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [20, 10],
            symbolOffset: [0, 5],
            z: 12,
            data: pushSumCount,
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                opacity: 0.7,
              },
            },
            barWidth: "20",
            data: pushSumCount,
          },
          {
            type: "effectScatter",
            silent: true,
            tooltip: {
              show: false,
            },
            zlevel: 3,
            symbolSize: 10,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              color: "#3cefff",
              scale: 5,
            },
            itemStyle: {
              color: "#3cefff",
            },
            hoverAnimation: true,
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
        ],
      };
      // chart.setOption(option, notMerge, lazyUpdate);
      //notMerge:可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
      fraud.setOption(option); //当修改setOption值的时候，需要echarts重绘，第二个人参数是
      // fraud.hideLoading();
      window.addEventListener("resize", () => {
        fraud.resize();
      });
    },
    //点击照片-查看详情
    choiceImg(obj) {
      console.log("obj==", obj);
      this.imgsGroupTow.forEach((element) => {
        // if (element.indexImg == imgNum) {
        if (element.name === obj.b_nickname) {
          console.log("====,", element);
          this.dialogChoiceImg = true;
          this.imgUrl = element.url;
          this.title = element.title;
        }
      });
    },
    handleLeft(){
      let aaa = null
      aaa = document.getElementById("r_img_box_id")
      console.log("aaa===", aaa);
      aaa.scrollLeft = aaa.scrollLeft - 720
      console.log("aaa.scrollLeft==",aaa.scrollLeft);
    },
    //点击右边
    handleRgiht() {
      console.log("11111111111111111---------------");
      let xxx = null
      xxx = document.getElementById("r_img_box_id")
      // let xxx = document.getElementsByClassName("r_img_box_item");
      console.log("xxxx===", xxx);
      // xxx.style.animation = '5s'
      xxx.scrollLeft = xxx.scrollLeft + 720
      console.log("xxx.scrollLeft==",xxx.scrollLeft);
      // console.log("xxxx===",xxx.style);
      // xxx.style.fontSize = '20px'
      // xxx.style.marginLeft = '50px'
      for (let index = 0; index < xxx.length; index++) {
        const element = xxx[index];
        // xxx[index].style.background = "red"
        // xxx[index].style.marginLeft = "20px"
        // xxx[index].scrollLeft = 120
      }
    },
  },
  computed: {
    cityCode: {
      get() {
        return this.$store.state.user.cityId;
      },
    },
    staffAccount: {
      get() {
        return this.$store.state.user.staffAccount;
      },
    },
    // ...mapGetters(["cityData"]),
    mapOptions() {
      // let _this = this;
      let options = {
        // tooltip: {
        //   show: true,
        //   trigger: "item",
        //   renderMode: "html",
        //   confine: true,
        //   appendToBody: true,
        //   position: ["0%", "0%"],
        //   backgroundColor: "transparent",
        // },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            // console.log(params);
            // 判断是否NAN
            if (params.value !== params.value) {
              return params.name;
            } else {
              return params.name + " : " + params.value;
            }
          },
        },
        geo: {
          map: this.map,
          roam: false,
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            // areaColor: "rgba(17,251,252,1)",
            shadowColor: "rgba(17,251,252,.8)",
            shadowBlur: 3,
            shadowOffsetX: 0,
            shadowOffsetY: 10,
            borderColor: "rgba(9,249,247, 0.7)",
            borderWidth: 0.5,
          },
          emphasis: {
            areaColor: "#2AB8FF",
            borderWidth: 1,
            color: "green",
            label: {
              show: false,
            },
          },
          top: "5%",
          bottom: "5%",
          tooltip: {
            show: true,
          },
        },
        series: [
          {
            type: "map",
            map: this.map,
            // roam: false,
            // selectedMode: false,
            top: "5%",
            bottom: "5%",
            tooltip: {
              show: true,
            },
            label: {
              show: true,
              color: "#fff",
            },
            itemStyle: {
              borderColor: "#2ab8ff",
              borderWidth: 1,
              areaColor: "rgb(3,53,112)",
              shadowColor: "rgba(0, 0, 0, 0.5)",
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 1,
              emphasis: {
                areaColor: "rgb(23,93,140)",
                borderColor: "rgb(23,53,140)",
                borderWidth: 1,
                shadowColor: "rgba(0, 255, 255, 0.7)",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 1,
                label: {
                  show: true,
                  color: "#fff",
                },
              },
            },
            z: 999,
            selectedMode: "single", //选择模式，单选，只能选中一个地市
            select: {
              //这个就是鼠标点击后，地图想要展示的配置
              disabled: false, //可以被选中
              itemStyle: {
                //相关配置项很多，可以参考echarts官网
                areaColor: "#77e8e4", //选中
              },
            },
            data: this.mapDatas, //你的地图数据
          },
        ],
        dataRange: {
          show: false, //是否显示指示器，false不显示，true显示
          splitList: this.colorList,
          textStyle: {
            color: "#fff", //前三名 字体颜色
          },
        },
      };
      this.mapObj.setOption(options); //当修改setOption值的时候，需要echarts重绘，第二个人参数是
      window.addEventListener("resize", () => {
        this.mapObj.resize();
      });
      return options;
    },
  },
};
</script>

<style scoped lang="scss">
.homeNew_b {
  width: 100%;
  // height: 100vh;
  // border: 1px solid red;
  display: flex;
  box-sizing: border-box;
  background: url("../../assets/homeNew/bg_one.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px;
}
.homeNew_l {
  // height: 85vh;
  // flex: 2;
  width: 20%;
  // border: 1px solid yellow;
  // height: 87vh;
  // height: 95vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  .l_map {
    flex: 6;
    // background: red;
    // border: 1px solid red;
    width: 100%;
    position: relative;
    .l_map_box {
      position: absolute;
      // right: 10px;
      right: 0px;
      width: 6.25rem;
      top: 10px;
      z-index: 9999;
    }
    .l_map_title {
      background: url("../../assets/homeNew/g_tow.png");
      background-repeat: no-repeat;
      // background-size: cover;
      background-size: 100% 95%;
      display: inline-block;
      width: 81px;
      height: 36px;
      /* display: inline-block; */
      text-align: center;
      line-height: 36px;
      cursor: pointer;
    }
    .map_box {
      // height: 300px;
      height: 55vh;
      width: 100%;
    }
  }
  .l_content {
    // flex: 1.5;
    // background: green;
    // border: 1px solid green;
    background: url("../../assets/homeNew/bg_four.png");
    background-repeat: no-repeat;
    // background-size:cover;
    background-size: 100% 95%;
    // background-position: 10% 40%;
    // text-align: center;
    display: flex;
    // justify-content: space-around;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    .l_c_img {
      vertical-align: middle;
      display: inline-block;
    }
    .l_c_c {
      display: inline-block;
      text-align: right;
      margin-top: -20px;
      .l_c_num{
        margin-top: .625rem;
      }
      .l_c_num span:first-child {
        margin-top: 10px;
        font-size: 1.875rem;
        color: rgb(0, 191, 240);
      }
    }
  }
  .l_button {
    // flex: 2;
    // height: 95%;
    // background: pink;
    // border: 1px solid purple;
    background: url("../../assets/homeNew/bg_five.png");
    background-repeat: no-repeat;
    // background-size:cover;
    background-size: 100% 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    // justify-content: space-between;
    .l_b_b {
      .l_b_b_img{
        // width: 2.5rem;
        height: 20px;
      }
      transform: translateY(-0.625rem);
      text-align: center;
      // margin-top: 48px;
      margin-top: 28px;
      .img_one {
        width: 30px;
        margin-bottom: -10px;
      }
      .img_tow {
        width: 80px;
      }
      .l_b_b_title {
        font-size: 12px !important;
      }
      div:last-child {
        color: rgb(0, 191, 240);
        margin-top: 0.625rem;
        font-size: 22px;
      }
    }
  }
}
.homeNew_r {
  // flex: 7;
  width: 79%;
  // border: 1px solid pink;
  // height: 85vh;
  // width: 98%;
  // height: 95vh;
  margin-left: 10px;
  // margin-right: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  .r_top {
    // flex: 2;
    width: 100%;
    // border: 1px solid red;
    background: url("../../assets/homeNew/bg_six.png");
    background-repeat: no-repeat;
    // background-size:cover;
    background-size: 100% 100%;
    // margin-top: .3125rem;
    .r_top_img {
      width: 100%;
      position: relative;
      .r_top_img_title {
        .r_img_title {
          padding-left: 0.9875rem;
          padding-top: 0.9875rem;
          padding-bottom: 0.3125rem;
        }
        .r_img_num {
          float: right;
          // margin-right: 0.9125rem;
          margin-top: -1.8875rem;
        }
      }
      .r_img_box {
        .left_box{
          position: absolute;
          top: 50%;
          left: 20px;
          z-index: 10000;
        }
        .right_box {
          position: absolute;
          top: 50%;
          right: 20px;
          z-index: 10000;
        }
        text-align: center;
        width: 100%;
        // max-width: 70rem;
        // width: calc(100% - 1800px);
        display: flex;
        // overflow: hidden;
        overflow-x: auto;
        // height: 200px;
        .r_img_box_item {
          position: relative;
          margin: 0 0.3125rem;
          vertical-align: bottom;
          // width: 300px;
          // margin-left: 140px;

          overflow: visible;
          text-align: center;
          .r_img_box_nickname {
            position: absolute;
            // top: 0.9375rem;
            // left: 11.875rem;
            top: 0.5375rem;
            left: 0.875rem;
            // vertical-align: middle;
          }
          .r_img_box_nickname_Num {
            position: absolute;
            // top: 4.9375rem;
            // left: 19.875rem;
            top: 2.9375rem;
            // top: 3.9375rem;
            // left: 9.875rem;
            right: 0.5625rem;
            div:last-child {
              margin-top: 0.625rem;
              color: rgb(0, 191, 240);
              cursor: pointer;
            }
          }
        }
      }
      .r_img_box::-webkit-scrollbar {
        // width: 40px;
        height: 10px;
      }
      .r_img_box::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
        background: rgba(11, 151, 255, 0.8);
        // margin-top: 5px;
      }
      .r_img_box::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(11, 151, 255, 0.2);
      }
      .r_img_carousel_item {
        position: relative;
        vertical-align: bottom;
        // width: 300px;
        // margin-left: 140px;

        overflow: visible;
        text-align: center;
        .r_img_nickname {
          position: absolute;
          // top: 0.9375rem;
          // left: 11.875rem;
          top: 0.5375rem;
          left: 2.875rem;
          // vertical-align: middle;
        }
        .r_img_nickname_Num {
          position: absolute;
          // top: 4.9375rem;
          // left: 19.875rem;
          top: 2.9375rem;
          left: 9.875rem;
          div:last-child {
            margin-top: 0.625rem;
            color: rgb(0, 191, 240);
            cursor: pointer;
          }
        }
      }
      .el-carousel__item img {
        // color: #475669;
        // font-size: 14px;
        // opacity: 0.75;
        // line-height: 200px;
        // margin: 0;
      }

      .el-carousel__item {
        // background-color: transparent;
      }

      // .el-carousel__item:nth-child(2n + 1) {
      //   background-color: rgb(3,34,88);
      // }
      //   el-carousel__item is-active el-carousel__item--card is-in-stage{
      //         width: 317px;
      // height: 200px;
      // }
      // width: 100%;
      .el-carousel__item.el-carousel__item--card.is-in-stage {
        text-align: center;
      }
      /deep/ .el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,
      .el-carousel__item--card.is-in-stage:hover .el-carousel__mask {
        opacity: 0 !important;
      }
      /deep/ .el-carousel__item--card {
        // width: 1%;
      }
      /*修改高度*/
      // /deep/ .el-carousel__container {
      //   height: 160px !important;
      // }
      .van-collapse-item__content {
        // padding: 14px 0;
      }
      // .el-carousel__item,
      // .el-carousel__mask {
      //   height: 100px;
      // }
      /deep/ .el-carousel__mask {
        width: 0%;
        // opacity: -0.24 !important;
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      // /*左右箭头的样式*/
      // button.el-carousel__arrow.el-carousel__arrow--left,
      // button.el-carousel__arrow.el-carousel__arrow--right {
      //   font-size: 12px;
      //   height: 20px;
      //   width: 20px;
      //   background: #a099f0;
      // }
      .headImgStyle {
        // width: 17.875rem;
        width: 15.875rem;
        height: 7.25rem;
      }
    }
  }
  .r_content {
    // flex: 4;
    width: 100%;
    // border: 1px solid yellow;
    background: url("../../assets/homeNew/bg_there.png");
    background-repeat: no-repeat;
    // background-size:cover;
    background-size: 100% 100%;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 15px 0rem;
    .r_content_one,
    .r_content_tow {
      border-right: 1px solid rgb(26, 100, 219);
      // flex: 3;
    }
    .r_content_one {
      flex: 2.5;
    }
    .r_content_tow {
      flex: 3;
    }
    .r_content_there {
      flex: 1.5;
    }
    .r_content_there,
    .r_content_tow {
      padding-left: 0.9875rem;
    }
    .r_content_one,
    .r_content_tow,
    .r_content_there {
      // border-right: 1px solid rgb(26, 100, 219);
      // padding-left: .9875rem;
      // flex: 1;
      margin-bottom: 0.625rem;
      .r_content_title {
        font-size: 1rem;
      }
      .r_top_b {
        vertical-align: bottom;
        margin-top: 0.9375rem;
        height: 270px;
        overflow-y: auto;
      }
      .r_top_b::-webkit-scrollbar {
        width: 4px;
      }
      .r_top_b::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
        background: rgba(3, 35, 88, 0.2);
      }
      .r_top_b::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(3, 35, 88, 0.2);
      }

      .r_top_box {
        // margin-top: .3125rem;
        // border-bottom: 1px solid rgb(0, 191, 240);
        position: relative;
        z-index: 2;
        &::after {
          content: "";
          position: absolute;
          z-index: 4;
          right: 0px;
          top: 10%;
          bottom: 1px;
          width: 100%;
          height: 1px;
          background: linear-gradient(
            to right,
            rgba(0, 191, 240, 0.2),
            rgba(0, 191, 240, 1),
            rgba(0, 191, 240, 0.2)
          );
        }
        line-height: 38px;
        height: 38px;
        display: flex;
        span {
          display: block;
          // flex: 1;
          text-align: center;
          // width: 30%;
        }
        .span_one {
          flex: 2;
          text-align: center;
          color: rgb(0, 191, 240);
        }
        .span_tow {
          flex: 4;
          color: #fff;
          font-size: 11px !important;
        }
        .span_there {
          flex: 2;
        }
      }
      .r_top_box:first-child {
        border-top: 1px solid rgb(0, 191, 240);
        // background-image:linear-gradient(180deg, deeppink 1px, rgb(0, 191, 240) 5px, transparent 1px);
        // background: linear-gradient(to right, red, blue 1px);
        position: relative;
        z-index: 2;
        &::after {
          content: "";
          position: absolute;
          z-index: 4;
          right: 0px;
          top: 0%;
          bottom: 1px;
          width: 100%;
          height: 1px;
          background: linear-gradient(
            to right,
            rgba(0, 191, 240, 0.2),
            rgba(0, 191, 240, 1),
            rgba(0, 191, 240, 0.2)
          );
        }
      }
      .r_top_box:last-child {
        border-bottom: 1px solid rgb(0, 191, 240);
        // background-image:linear-gradient(180deg, deeppink 1px, rgb(0, 191, 240) 5px, transparent 1px);
        // background: linear-gradient(to right, red, blue 1px);
        position: relative;
        z-index: 2;
        &::after {
          content: "";
          position: absolute;
          z-index: 4;
          right: 0px;
          top: 10%;
          bottom: 1px;
          width: 100%;
          height: 1px;
          background: linear-gradient(
            to right,
            rgba(0, 191, 240, 0.2),
            rgba(0, 191, 240, 1),
            rgba(0, 191, 240, 0.2)
          );
        }
      }
    }
    .r_content_one #fraud_pie,
    .r_content_tow #fraud_pieTow {
      width: 100%;
      /* border: 1px solid yellow; */
      min-height: 300px;
      /* margin-left: 20px; */
    }
  }
  .r_buttom {
    flex: 4;
    width: 100%;
    // border: 1px solid pink;
    background: url("../../assets/homeNew/bg_tow.png");
    background-repeat: no-repeat;
    // background-size:cover;
    background-size: 100% 100%;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 15px 0rem;
    .r_buttom_one,
    .r_buttom_tow {
      flex: 1;
    }
    .r_buttom_one {
      border-right: 1px solid #1a64db;
      .r_buttom_group {
        float: right;
        margin-right: 0.3125rem;
        /deep/ .el-radio-button--mini .el-radio-button__inner {
          padding: 4px 7px;
        }
      }
      #buttom_line {
        height: calc(100% - 20px);
      }
    }
    .r_buttom_tow {
      padding-left: 0.9875rem;
      .r_buttom_group {
        float: right;
        margin-right: 0.3125rem;
        /deep/ .el-radio-button--mini .el-radio-button__inner {
          padding: 4px 7px;
        }
      }
      #buttom_bar {
        height: calc(100% - 20px);
      }
    }
  }
}
.home_new_dialog /deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 57.5%;
  transform: translate(-47%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 200px);
  max-width: calc(100% - 30px);
}
.home_new_dialog /deep/ .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.courseImg {
  width: 100%;
  height: 100vh;
  background: #000 url("~@/assets/courseImg/choice.jpg") no-repeat;
  background-size: cover;
}
.couseDiv {
  position: relative;
  height: 100vh;
}
.couseDiv div:first-child {
  width: 30.5rem;
  height: 15.5rem;
  /* background: red; */
  position: absolute;
  top: 25%;
  left: 20%;
}
.couseDiv div:last-child {
  width: 30.5rem;
  height: 15.5rem;
  /* background: red; */
  position: absolute;
  top: 50%;
  left: 55%;
}
.bgImg >>> .el-dialog__wrapper {
  /* height: 100vh; */
  z-index: 10000000 !important;
  overflow: hidden;
}
.bgImg >>> .el-dialog__header {
  padding-top: 1px;
}
.guide_img >>> .el-dialog__wrapper {
  z-index: 10000000 !important;
  overflow: hidden;
}
.img_items {
  width: 120rem;
  height: 100%;
}
</style>
